<template>
  <div class="marketing-activity-list">
    <el-collapse-transition>
      <div v-show="!isShowEffect">
        <div class="top">
          <div class="app-main-top-box">
            <div class="title">装修模块</div>
            <el-button type="info" plain @click="addText(0,'add')">新增</el-button>
          </div>
        </div>
        <!-- 列表 -->
        <div class="bottom app-main-content-box">
          <div class="flexRBC">
            <div class="list-search">
              <el-form ref="filterForm" :inline="true" :model="filterForm" label-width="150px" size="small">
                <el-form-item prop="moduleName">
                  <el-input v-model="filterForm.moduleName" placeholder="请输入装修模块名称搜索" size="small"
                    class="input-with-select" />
                </el-form-item>
                <el-button type="primary" @click="search" size="small">搜索</el-button>
                <el-button @click="reset" size="small">重置</el-button>
              </el-form>
            </div>
          </div>
          <div class="content">
            <!-- 表格内容 -->
            <div class="list-table">
              <el-table v-loading="tableLoading" :data="tableData" border stripe style="width:1200px" size="small"
                element-loading-text="加载中" empty-text="暂`无数据">
                <el-table-column label="名称" align="center" prop="moduleName">
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime">
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <div class="handle">
                      <p></p>
                      <el-button type="text" size="mini" @click="editText(scope.row,'edit')">编辑</el-button>
                      <p></p>
                      <el-button type="text" size="mini" @click="copyText(scope.row,'copy')">复制</el-button>
                      <p></p>
                      <el-button type="text" size="mini" @click="ClickDelete(scope.$index,scope.row)">删除</el-button>
                      <p></p>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <pagination-direction v-if="paginationConfig.total!==0" :config="paginationConfig"
              @sizeschange="sizesChange" @pagechange="pageChange" />
            </div>
          </div>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { lowCodeModuleList, lowCodeModuleDelete, lowCodeModuleCopy, lowCodeModuleAdd } from '@/api/marketing';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      /* 筛选 */
      filterForm: {
        moduleName: '',
      },
      /* 分页 */
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      /* 状态 */
      tableLoading: false, // 表格loading
      searchLoading: false,
      isShowEffect: false,
      /* 数据 */
      list: [], // 表格数据
      filterType: 'all',
      tableData: [],
    }

  },
  mounted() {
    //请求表格数据
    this.initData();
  },
  computed: {
    ...mapGetters(['curMenu'])
  },
  methods: {
    //请求数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize,
    ) {
      this.$nextTick(() => {
        this.$refs.filterForm.validate((valid, error) => {
          if (valid) {
            this.loading = true
            const params = Object.assign({}, this.filterForm)
            params.page = page
            params.pageSize = pageSize
            params.moduleType = 2
            // 清除多余字段
            for (const key in params) {
              if (params[key] === '' || params[key] === 'all') {
                delete params[key]
              }
            }
            lowCodeModuleList(params)
              .then((res) => {
                console.log(111, res);
                this.tableData = res.data.list
                this.paginationConfig.total = res.data.total
                this.paginationConfig.page = res.data.pageNum
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      })
    },
    search() {
      this.initData()
    },
    //重置
    reset() {
      this.$refs.filterForm.resetFields()
      this.initData()
    },
    //新增
    addText(page_id = 0, op) {
      this.$nextTick(() => {
        this.curMenu[this.curMenu.length - 1] = {
          ...this.curMenu[this.curMenu.length - 1],
          title: '新增'
        }
        this.$store.dispatch(
          'setCurmenu',
          JSON.parse(JSON.stringify(this.curMenu))
        )
      })
      this.$router.push({
        name: 'DescFrame',
        query: { page_id, sign: "desc-modal", op }
      })
    },
    //编辑
    editText(item, op) {
      if (op === 'edit') {
        window.localStorage.setItem('pageJson', item.moduleJson),
          window.localStorage.setItem('status', item.status)
      }
      this.$router.push({
        name: 'DescFrame',
        query: { page_id: item.id, sign: "desc-modal", op }
      })

    },
    //复制
    copyText(item, op) {
      this.$confirm('确定要复制该表单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        lowCodeModuleCopy({ id: item.id }).then(res => {
          this.$message({
            type: 'success',
            message: '复制成功!'
          });
        })
        this.$nextTick(() => {
          this.curMenu[this.curMenu.length - 1] = {
            ...this.curMenu[this.curMenu.length - 1],
            title: '新增'
          }
          this.$store.dispatch(
            'setCurmenu',
            JSON.parse(JSON.stringify(this.curMenu))
          )
        })
        if (op === 'copy') {
          window.localStorage.setItem('pageJson', item.moduleJson),
            window.localStorage.setItem('status', item.status)
        }
        this.$router.push({
          name: 'DescFrame',
          query: { page_id: item.id, sign: "desc-modal", op }
        })
      }).catch(() => { });
    },
    //删除
    ClickDelete(index, row) {
      this.$confirm(`删除后将不可恢复, 确认删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          const data = {
            id: row.id,
            isDelete: 1,
          }
          lowCodeModuleDelete(data).then(res => {
            if (res.code === 0) {
              this.$message({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.initData()
            }
          })
        })
        .catch(() => { })
    },
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* tab */
::v-deep {
  .el-tabs__header {
    margin-bottom: 0;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
  }

  .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  .el-tabs__active-bar {
    height: 4px;
  }
}

/* 头部 */
.top {
  padding: 24px 30px 4px;
  border-radius: 5px 5px;
  background-color: #fff;
  margin-bottom: 10px;

  .title {
    font-size: 20px;
  }
}

/*搜索  */
.list-search {
  .el-input {
    width: 40%;
    min-width: 300px;
    max-width: 700px;
    margin-right: 30px;
  }
}

/* 表格内容 */
.content {
  margin-top: 10px;

  .list-table {
    .handle {
      p {

        display: inline-block;
        margin-left: 38px;

      }
    }
  }
}
</style>
